我們設定一個 dataArr
陣列,裡面存放 name
還有 money
組成的物件,我們宣告一個 save
方法,傳入一個物件 item
把當成這個方法參數,並將這個方法用 @click
綁定在 button
的點擊事件。最後我們使用 v-for
存取 dataArr
的資料 ,將 dataArr
的值傳入 item
,此時當我們點擊按鈕後,dataArr
就會用 item
物件的方式傳入 save
方法中,執行將物件的 money
加 500。
<body>
<div class="app">
<ul>
<li v-for="item in dataArr">
{{item.name}}有{{item.money}}$ <input type="button" value="儲值" @click="save(item)">
</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'.app',
data:{
dataArr:[
{
name: 'Leo',
money:200
},
{
name: 'Peter',
money:600
},
{
name: 'Amy',
money:500
}
]
},
methods:{
save:function(item){
item.money+=500;
}
}
});
</script>
如果我們設定三個 div
區塊,一個 div
區塊包著另一個 div
區塊,並且在 div
區塊內設定點擊方法 show
,此方法會秀出 div
區塊的名稱,此時當我點擊最裡面 div
區塊元素時可以發現,我們明明只有點擊到最內部的 div
區塊,console
卻顯示從 box3
到 box1
,這是因為我們在觸發動元素時是由內從外觸發。所以我們點擊內部 div
也會觸發到外部的 div
區塊。
<body>
<div class="app">
<div style="width:100px;height:100px;background-color: red;" @click="show('box1')">
<div style="width:50px;height:50px;background-color:black;"@click="show('box2')">
<div style="width:25px;height:25px;background-color:green;"@click="show('box3')">
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'.app',
methods:{
show: function(item){
console.log(item);
}
}
});
</script>
若我們在 @click
加上 .stop
就可以讓點擊事件不向外擴散。
<body>
<div class="app">
<div style="width:100px;height:100px;background-color: red;"@click.stop="show('box1')">
<div style="width:50px;height:50px;background-color:black;"@click.stop="show('box2')">
<div style="width:25px;height:25px;background-color:green;"@click.stop="show('box3')">
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'.app',
data:{
},
methods:{
show: function(item){
console.log(item);
}
}
});
</script>
如果我們在 @click
加上 .capture
就可以讓點擊事件變成由外而內觸發,當我們點擊時顯示 box1 → box2
<body>
<div class="app">
<div style="width:100px;height:100px;background-color: red;"@click.capture="show('box1')">
<div style="width:50px;height:50px;background-color:black;"@click.capture="show('box2')">
<div style="width:25px;height:25px;background-color:green;"@click.capture="show('box3')">
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'.app',
data:{
},
methods:{
show: function(item){
console.log(item);
}
}
});
</script>
@click
加上 .self
,就只會觸發本身事件
<body>
<div class="app">
<div style="width:100px;height:100px;background-color: red;"@click.self="show('box1')">
<div style="width:50px;height:50px;background-color:black;"@click.self="show('box2')">
<div style="width:25px;height:25px;background-color:green;"@click.self="show('box3')">
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'.app',
data:{
},
methods:{
show: function(item){
console.log(item);
}
}
});
</script>